<%- include('../layout') %>

<% contentFor('body') { %>
<% currentPath = '/' %>
<div class="container-fluid">
  <h2>仪表盘</h2>
  <div class="row mt-4">
    <!-- 统计卡片 -->
    <div class="col-md-3 mb-4">
      <div class="card text-white bg-primary">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <h5 class="card-title">用户总数</h5>
              <p class="card-text display-4"><%= stats.userCount %></p>
            </div>
            <div class="col-auto">
              <i class="fa fa-users fa-3x"></i>
            </div>
          </div>
        </div>
        <a href="/admin/users" class="card-footer text-white bg-primary bg-opacity-80">
          <span>查看详情</span>
          <i class="fa fa-chevron-right"></i>
        </a>
      </div>
    </div>
    
    <div class="col-md-3 mb-4">
      <div class="card text-white bg-success">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <h5 class="card-title">动物总数</h5>
              <p class="card-text display-4"><%= stats.animalCount %></p>
            </div>
            <div class="col-auto">
              <i class="fa fa-paw fa-3x"></i>
            </div>
          </div>
        </div>
        <a href="/admin/animals" class="card-footer text-white bg-success bg-opacity-80">
          <span>查看详情</span>
          <i class="fa fa-chevron-right"></i>
        </a>
      </div>
    </div>
    
    <div class="col-md-3 mb-4">
      <div class="card text-white bg-warning">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <h5 class="card-title">分类总数</h5>
              <p class="card-text display-4"><%= stats.categoryCount %></p>
            </div>
            <div class="col-auto">
              <i class="fa fa-th-large fa-3x"></i>
            </div>
          </div>
        </div>
        <a href="/admin/categories" class="card-footer text-white bg-warning bg-opacity-80">
          <span>查看详情</span>
          <i class="fa fa-chevron-right"></i>
        </a>
      </div>
    </div>
    
    <div class="col-md-3 mb-4">
      <div class="card text-white bg-info">
        <div class="card-body">
          <div class="row">
            <div class="col">
              <h5 class="card-title">点赞总数</h5>
              <p class="card-text display-4"><%= stats.likeCount %></p>
            </div>
            <div class="col-auto">
              <i class="fa fa-heart fa-3x"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 最近活动 -->
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5>最近注册用户</h5>
        </div>
        <div class="card-body">
          <% if (recentUsers.length > 0) { %>
          <table class="table table-sm">
            <thead>
              <tr>
                <th>用户名</th>
                <th>邮箱</th>
                <th>注册时间</th>
              </tr>
            </thead>
            <tbody>
              <% recentUsers.forEach(user => { %>
              <tr>
                <td><%= user.username %></td>
                <td><%= user.email %></td>
                <td><%= new Date(user.createdAt).toLocaleString() %></td>
              </tr>
              <% }); %>
            </tbody>
          </table>
          <% } else { %>
          <p class="text-center text-muted">暂无新用户</p>
          <% } %>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h5>热门动物</h5>
        </div>
        <div class="card-body">
          <% if (popularAnimals.length > 0) { %>
          <table class="table table-sm">
            <thead>
              <tr>
                <th>动物名称</th>
                <th>分类</th>
                <th>点赞数</th>
              </tr>
            </thead>
            <tbody>
              <% popularAnimals.forEach(animal => { %>
              <tr>
                <td><%= animal.name %></td>
                <td><%= animal.category?.name || '未分类' %></td>
                <td><%= animal.likeCount || 0 %></td>
              </tr>
              <% }); %>
            </tbody>
          </table>
          <% } else { %>
          <p class="text-center text-muted">暂无动物数据</p>
          <% } %>
        </div>
      </div>
    </div>
  </div>
</div>
<% } %>